<template>
  <div class="dynamic-card-item">
    <!-- 标题 -->
    <CustomSection :title="data.title" v-if="data.title">
      <div class="custom-section_ope" v-if="showSectionOptions">
        <img src="@/assets/images/download.svg" class="section-icon pointer" v-if="showSectionFun('download')"
          @click="download" />
        <img src="@/assets/images/enlarge.svg" class="section-icon pointer" v-if="showSectionFun('enlarge')"
          @click="enlarge" />
        <div class="section-text pointer" v-if="showSectionFun('more')">查看更多</div>
      </div>
    </CustomSection>

    <!-- 卡片筛选项 -->
    <el-row class="dynamic-card-item_row" :gutter="20">
      <el-col :span="24" v-for="(item, index) in data.cardFilterOptions" :key="index">
        <Component :is="setFilterCmps(item)" :data="{ ...item, cardId: data.cardId }" :form="cardForms[index]"
          @handleFieldChange="(field, val) => handleFieldChange(index, field, val)" />
      </el-col>
    </el-row>

    <!-- 卡片主体 -->
    <el-row class="dynamic-card-item_row" :gutter="20">
      <el-col :span="24">
        <Component ref="bodyCmpsRef" :searchForm="cardForm" :is="setBodyCmps(data.cardBodyConfig)"
          :data="{ ...data.cardBodyConfig, cardId: data.cardId }" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="js">
import { ref, watch, computed, nextTick } from 'vue'
import { useDynamicCardDialogStore } from "@/store/dynamic-card-dialog"
import { mapFilterCmps, mapBodyCmps } from "./config/map-config"
import message from '@/utils/message'

const props = defineProps({
  showSectionOptions: { // 是否显示卡片操作项
    type: Boolean,
    default: true
  },
  data: {
    required: true,
    default: () => ({
      title: "", // 卡片标题
      showSectionCondition: "", // 卡片操作按钮 下载/放大
      cardFilterOptions: [], // 卡片筛选项配置
      cardBodyConfig: {
        type: "", // 类型 echart/table
        url: "", // 接口地址
        style: {}, // echart/table 样式 例如高度
        config: {}, // 图表 表格 配置
      }
    })
  }
})

const dynamicCardDialogStore = useDynamicCardDialogStore()

// 存储各个筛选组件的 form 数据
const cardForms = ref([])

// 卡片主体dom
const bodyCmpsRef = ref(null)

watch(
  () => props.data.cardFilterOptions,
  (newVal) => {
    cardForms.value = newVal.map(() => ({}))
  },
  { immediate: true }
)

// 合并所有 cardForms 成一个 cardForm
const cardForm = computed(() => {
  return cardForms.value.reduce((acc, form) => {
    return { ...acc, ...form }
  }, {})
})

// 判断是否显示操作按钮
const showSectionFun = (condition) => {
  return props.data.showSectionCondition?.includes(condition) ?? false
}

// 点击放大
const enlarge = () => {
  dynamicCardDialogStore.setShowDialog(true)
  dynamicCardDialogStore.setData(props.data)
}

// 下载
const download = () => {
  let type = props.data.cardBodyConfig.type;
  if (type == "echart") {
    nextTick(() => {
      const base64 = bodyCmpsRef.value?.downloadImage();
      if (base64) {
        const a = document.createElement("a");
        a.href = base64;
        a.download = `${props.data.title || "chart"}.png`;
        a.click();
      }
    });
  } else {
    message.error("暂不支持下载")
  }
}

// 根据 type 返回对应筛选组件
const setFilterCmps = (item) => {
  return mapFilterCmps[item.type]
}

// 根据 type 返回对应主体组件
const setBodyCmps = (config) => {
  return mapBodyCmps[config.type]
}

// 筛选条件发生变更
const handleFieldChange = (index, field, val) => {
  cardForms.value[index][field] = val
}
</script>

<style scoped lang="scss">
.dynamic-card-item {
  .dynamic-card-item_row {
    row-gap: vh(15);
  }

  .custom-section_ope {
    display: flex;
    align-items: center;

    .section-icon {
      width: vw(18);
      margin-right: vw(15);
    }

    .section-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: vw(12);
      color: #76939E;
      margin-right: vw(15);
    }
  }
}
</style>
